<template>
  <div class="center-container" style="margin-top: 50px">
  <div class="common-layout">
  <el-container>
    <el-aside width="215px" style="padding: 0!important;">
      <el-menu
          style="width:97%;height:696px;font-weight: bold;background: linear-gradient(rgba(84,104,255,0.8),rgba(255,255,255,0.7));margin: 0!important;"
          text-color="#000000D9"
          active-text-color="#FFF"

          unique-opened router
          @select="selectMenu"
      >
        <!-- 左侧菜单栏中的顶部条 -->
        <el-row :gutter="10" style="padding-top:10px;">
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left:7px;">
<!--            TODO后期换个人头像-->
            <el-avatar src="/logo.png" style="width: 60px;height: 60px;background: radial-gradient(#fff,#5468FF);"></el-avatar>
          </el-col>
          <el-col :span="13">
            <p
                style="color:#fff;text-decoration:none;font-weight:bold;position:relative;top:8px;left:2px;">
              个人中心
            </p>
          </el-col>
        </el-row>
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size:21px;">
              <img src="/personalcenter/bought.svg">
            </el-icon>
            <span>我购买的</span>
          </template>
          <el-menu-item index="/personal/details/finished">成品号</el-menu-item>
          <el-menu-item index="/personal/details/other">其他商品</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size:21px;">
              <img src="/personalcenter/shop.svg">
            </el-icon>
            <span>我发布的</span>
          </template>
          <el-menu-item index="/personal/details/goods">商品</el-menu-item>
          <el-menu-item index="/personal/details/competition">竞价</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size:21px;">
              <img src="/personalcenter/shop.svg">
            </el-icon>
            <span>我卖出的</span>
          </template>
          <el-menu-item index="/personal/details/selled">已售商品</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size:21px;">
              <img src="/personalcenter/shop.svg">
            </el-icon>
            <span>我的鉴定</span>
          </template>
          <el-menu-item index="/personal/details/seniorIdentify">高级鉴定</el-menu-item>
          <el-menu-item index="/personal/details/commonIdentify">普通鉴定</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon style="font-size:21px;">
              <img src="/personalcenter/card.svg">
            </el-icon>
            <span>我的钱包</span>
          </template>
          <el-menu-item index="/personal/details/withdraw">提现</el-menu-item>
          <el-menu-item index="/personal/details/violationHandle">处理违规</el-menu-item>
          <el-menu-item index="/personal/details/transaction">交易明细</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>
            <el-icon style="font-size:21px;">
              <img src="/personalcenter/set.svg">
            </el-icon>
            <span>设置</span>
          </template>
          <el-menu-item index="/personal/details/mySet">我的设置</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="padding-left: 0"> <el-card style="width: 975px;height: 143px;margin-left: 10px;padding-left: 0!important;">
        <el-row :gutter="10">

          <el-col :span="6">
            <el-breadcrumb separator="/" style="position:relative;top:20px;">
              <el-breadcrumb-item v-for="item in breadCrumb">{{item}}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>

         <el-col :span="6" style=" display: flex; flex-direction: column;align-items: center;justify-content: flex-start;">
             <p style="font-size: 24px;font-weight: bold;color: #000; display: flex;
">¥{{withdrawing}}</p>
             <p style="font-size: 12px;color: #666">余额</p>
         </el-col>
          <el-col :span="6" style=" display: flex; flex-direction: column;align-items: center;justify-content: flex-start;">
             <p style="font-size: 24px;font-weight: bold;color: #000;display: flex;">¥{{balance}}</p>
             <p style="font-size: 12px;color: #666"> 提现中</p>
         </el-col>
          <el-col :span="6" >
            <br>
              <router-link to="/personal/details/withdraw">
                <el-button type="primary" style="margin-right: 50px;width: 114px;height: 34px">提现</el-button>
              </router-link>
            <br>
            <br>
            <router-link to="/personal/details/violationHandle">
            <el-button style="margin-right: 50px;width: 114px;height: 34px">处理违规</el-button>
            </router-link>
          </el-col>
      </el-row>
      </el-card>
      </el-header>
      <el-main style="padding-left: 0"><router-view  style="width: 975px;height: 535px;margin-top: 80px;background-color: #fff;margin-left: 12px;border-radius: 10px" /></el-main>
    </el-container>
  </el-container>
  </div>


  </div>

</template>

<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";


const withdrawing = ref(0.00)
const balance = ref(0.00);

//准备数组维护面包屑数据
let map = {
  '/personal/details/finished':['我购买的','成品号'],
  '/personal/details/other':['我购买的','其他商品'],
  '/personal/details/goods': ['我发布的','商品'],
  '/personal/details/competition': ['我发布的','竞价'],
  '/personal/details/selled':['我卖出的','已售商品'],
  '/personal/details/seniorIdentify':['我的鉴定','高级鉴定'],
  '/personal/details/commonIdentify':['我的鉴定','普通鉴定'],
  '/personal/details/withdraw':['我的钱包','提现'],
  '/personal/details/violationHandle':['我的钱包','处理违规'],
  '/personal/details/transaction':['我的钱包','交易明细'],
  '/personal/details/mySet':['设置','我的设置'],
};
//定义变量维护当前面包屑的数据,第一次进来未点击,给数组要赋初始值
const breadCrumb = ref(JSON.parse(localStorage.getItem('breadCrumb') || '["我购买的", "成品号"]'));

//选择菜单项时触发
const selectMenu = (index)=>{
  //根据选择的菜单项index,取出map中对应index的值,如['车辆管理','基本信息'],赋值给breadCrumb,数组在变化,用选择获得索引联系左右
  breadCrumb.value = map[index];
  //将值存入localStorage中,防止刷新页面数据丢失
  localStorage.setItem('breadCrumb',JSON.stringify(breadCrumb.value))
}
</script>

<style scoped>
.center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 将内容靠近顶部 */
  min-height: 100vh;
  background-color: #f0f0f0;
  padding: 20px 0; /* 上下内边距减少到 20px */
  background-color: rgba(0, 0, 0, 0);

}
/deep/.el-menu--vertical{
  border: none;
  border-radius: 25px;
}
/deep/.el-menu-item{
  background:linear-gradient(to right, rgba(84, 104, 255, 0.5), rgba(0, 123, 255, 0.5));
}
/*面包屑字体修改*/
/deep/.el-breadcrumb__inner{
  color: #5468FF!important;
  font-weight: bold!important;
  font-size: 24px;
}
</style>